<!--
 * @FileDescription: 新增/修改 堆场弹窗
 * @Author: 祝小文
 * @Date: 2022-10-08 09:21
 -->
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { emitter } from '@/composables'
import Title from '@/components/title/index.vue'
import upload from '@/components/upload/index.vue'
import DialogPopUp from '@/components/DialogPopUp/index.vue'
import { checkNumberTypeAndLength } from '@/utils/common'
import { queryDcxxInfo, queryZdZdmcInfo, insertOrUpdateDcxx } from '@/service/api'

const chemicalStore = useChemicalStore()
const yard = chemicalStore.productionStorage.yard

const props = defineProps({
  cjInfo: {
    type: Object,
    default: () => {
      return {}
    },
  }, //采集信息,
})

//字典
const syzt: any = chemicalStore.commonDictionaries.syzt
const wxydj: any = chemicalStore.commonDictionaries.wxydj

//字段默认值
function fieldDefault() {
  if (props.cjInfo.lx === 'edit') {
    const selectField = ['syzt', 'wxydj']
    for (const key in dcInfo.value) {
      if (selectField.includes(key) && dcInfo.value[key] === '0') {
        if (key === 'syzt') {
          dcInfo.value.syzt = syzt[0].zddm
        } else if (key === 'wxydj') {
          dcInfo.value.wxydj = wxydj[0].zddm
        }
      }
    }
  } else {
    dcInfo.value.syzt = syzt[0].zddm
    dcInfo.value.wxydj = wxydj[0].zddm
  }
}

//获取企业id
const qyId = computed(() => {
  return chemicalStore.qyInfo.id
})

//堆场信息
const dcInfo = ref({
  dcmc: '',
  syzt: '',
  wxydj: '',
  dcmj: '',
  cfgd: '',
  cfwplx: '',
  symhjzysx: '',
  bz: '',
})
//附件信息
const fjxxInfoList = ref([
  {
    fjlx: '',
    fjmc: '',
    fjdz: '',
    sfyx: 1,
    qyid: chemicalStore.qyInfo.id,
  },
])
const fileupload = ref()
//必填字段
const requiredNameArr = [
  'dcmc',
  'syzt',
  'wxydj',
  'dcmj',
  'cfgd',
  'cfwplx',
  'symhjzysx',
  'rymc',
  'ryyddh',
  'ryzbdh',
]
//联系人信息标题
const fzrxxTitleList = [{ kind: '区域安全负责人' }]
//联系人信息
const fzrxxInfoList = ref([{ rymc: '', ryyddh: '', ryzbdh: '', rysx: '7' }])

function uploadCuccess(val: any) {
  fjxxInfoList.value = val.value
}
function uploadDelete(val: any) {
  fjxxInfoList.value = val
}

/** 渲染堆场信息 */
function loadYardInfo() {
  queryDcxxInfo({ key: props.cjInfo.cjId }).then((res: any) => {
    delete res.id //过滤id
    delete res.cjsj //过滤创建时间
    delete res.gxsj //过滤更新时间

    //联系人信息赋值
    const fzrxxData = JSON.parse(JSON.stringify(res.fzrxxInfoList))
    delete res.fzrxxInfoList
    fzrxxInfoList.value.forEach((item: any) => {
      fzrxxData.forEach((el: any) => {
        if (item.rysx === el.rysx) {
          item.id = el.id
          item.rymc = el.rymc
          item.ryyddh = el.ryyddh
          item.ryzbdh = el.ryzbdh
        }
      })
    })

    //附件信息赋值
    fileupload.value.fjxxInfoListsf = res.fjxxInfoList
    fjxxInfoList.value = res.fjxxInfoList
    delete res.fjxxInfoList

    dcInfo.value = res

    fieldDefault() //字段默认值
  })
}

/** 取消点击事件 */
const cancelClick = () => {
  chemicalStore.closeAllPSDialog() //关闭全部弹窗
  yard.addYardShow = false
}

/** 重置点击事件 */
const resetClick = () => {
  dcInfo.value = {
    dcmc: '',
    syzt: '',
    wxydj: '',
    dcmj: '',
    cfgd: '',
    cfwplx: '',
    symhjzysx: '',
    bz: '',
  }
  fzrxxInfoList.value = [{ rymc: '', ryyddh: '', ryzbdh: '', rysx: '7' }]

  //下拉框默认值
  dcInfo.value.syzt = syzt[0].zddm
  dcInfo.value.wxydj = wxydj[0].zddm
}

/** 保存点击事件 */
const saveClick = () => {
  /** 校验数据非空 Start */
  // let flag = false
  // //基本信息
  // for (const key in dcInfo.value) {
  //   if (requiredNameArr.includes(key) && !dcInfo.value[key]) {
  //     console.log(key, '字段未填写')
  //     flag = true
  //   }
  // }
  // //联系人信息
  // fzrxxInfoList.value.forEach((item) => {
  //   for (const key in item) {
  //     if (requiredNameArr.includes(key) && !item[key]) {
  //       console.log(key, '字段未填写')
  //       flag = true
  //     }
  //   }
  // })
  // if (flag) {
  //   return (chemicalStore.FormCheckConfirmShow = true)
  // }
  /** 校验数据非空 End */

  /** 校验数据类型和长度 Strat */
  if (!checkNumberTypeAndLength(dcInfo.value.dcmj, '面积', 6)) {
    return
  } else if (!checkNumberTypeAndLength(dcInfo.value.cfgd, '最大堆高', 6)) {
    return
  } else if (!checkNumberTypeAndLength(fzrxxInfoList.value[0].ryyddh, '手机号', 11)) {
    return
  }
  /** 校验数据类型和长度 End */
  if (
    fjxxInfoList.value.length > 0 &&
    fjxxInfoList.value[fjxxInfoList.value.length - 1].fjlx == ''
  ) {
    fjxxInfoList.value.splice(fjxxInfoList.value.length - 1, 1)
  }
  yard.addYardShow = false

  //联系人信息
  fzrxxInfoList.value.forEach((item: any) => {
    item.qyid = qyId.value
    item.sfyx = 1
  })

  //附件信息
  dcInfo.value.fjxxInfoList = fjxxInfoList.value.filter((item: any) => item.fjmc !== '')

  const params: any = {
    ...dcInfo.value,
    fzrxxInfoList: fzrxxInfoList.value,
    qyid: qyId.value,
    sfyx: 1,
  }

  //如果是修改需要传cjid
  if (props.cjInfo.lx === 'edit') {
    params.id = props.cjInfo.cjId
  }

  insertOrUpdateDcxx(params)
    .then((res: any) => {
      emitter.emit('tabLeft_refreshData') //更新左侧tab统计数量

      //添加
      if (props.cjInfo.lx === 'add') {
        ElMessage.success('新增堆场成功')
      }
      //修改
      else if (props.cjInfo.lx === 'edit') {
        ElMessage.success('修改堆场成功')
        //需要修改地图要素的标注名称
        window.GScrollWallArray.forEach((item: any) => {
          if (item.name === props.cjInfo.cjId) {
            item.scrollwallLabel.feature3D.setText(dcInfo.value.dcmc)
          }
        })
      }
      //刷新数据
      emitter.emit('dc_refreshData')
    })
    .catch((err: any) => {
      if (props.cjInfo.lx === 'add') {
        ElMessage.error('新增堆场失败')
      } else if (props.cjInfo.lx === 'edit') {
        ElMessage.error('修改堆场失败')
      }
    })
}

/** 如果是修改，需要重新渲染数据 */
watch(
  () => props.cjInfo.cjId,
  (newValue, oldValue) => {
    if (props.cjInfo.lx === 'edit') {
      loadYardInfo()
    } else {
      resetClick() //重置表单
      fieldDefault() //字段默认值
    }
  },
  {
    immediate: true,
    deep: true,
  }
)
</script>

<template>
  <DialogPopUp
    title="堆场信息"
    @cancel-click="cancelClick"
    @reset-click="resetClick"
    @save-click="saveClick"
  >
    <!-- 堆场基本信息 -->
    <div>
      <div>
        <Title title-info="基本信息" />
        <el-form label-width="110px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="堆场名称">
                <el-input v-model="dcInfo.dcmc" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="使用状态">
                <el-select v-model="dcInfo.syzt" placeholder="请选择">
                  <el-option
                    v-for="item in syzt"
                    :key="item.value"
                    :label="item.zdmc"
                    :value="item.zddm"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="危险源等级">
                <el-select v-model="dcInfo.wxydj" placeholder="请选择">
                  <el-option
                    v-for="item in wxydj"
                    :key="item.value"
                    :label="item.zdmc"
                    :value="item.zddm"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="面积">
                <el-input v-model="dcInfo.dcmj">
                  <template #suffix>
                    <i>㎡</i>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最大堆高">
                <el-input v-model="dcInfo.cfgd">
                  <template #suffix>
                    <i>m</i>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="bz">
                <el-input v-model="dcInfo.bz" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <el-form :label-position="'top'" style="padding-left: 30px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="存放物品类型及数量" prop="cfwplx">
                <el-input v-model="dcInfo.cfwplx" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="使用灭火药剂类型及注意事项">
                <el-input v-model="dcInfo.symhjzysx" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <!-- 联系人信息 -->
      <div>
        <Title title-info="联系人信息" />
        <el-form style="padding-left: 30px">
          <div v-for="(item, index) in fzrxxTitleList" :key="index">
            <el-row>
              <el-col :span="24">
                <el-form-item :label="item.kind" style="margin-bottom: 0"></el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="8">
                <el-form-item label="姓名">
                  <el-input v-model.trim="fzrxxInfoList[index].rymc" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手机">
                  <el-input v-model.trim="fzrxxInfoList[index].ryyddh" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="值班电话">
                  <el-input v-model.trim="fzrxxInfoList[index].ryzbdh" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>

      <!-- 上传附件 -->
      <div>
        <Title title-info="附件" />
        <upload
          ref="fileupload"
          :upload-title="['堆场附件']"
          style="padding-left: 30px"
          @upload-success="uploadCuccess"
          @uploadDelete="uploadDelete"
        />
      </div>
    </div>
  </DialogPopUp>
</template>

<style lang="less" scoped></style>
